<template>
  <div>
    <el-table :data="data.tableData" style="width: 100%" stripe border>
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="sex" label="性别" width="180" />
      <el-table-column prop="number" label="编号" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="desc" label="技能描述" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="deleteHandler(scope.row.name)">
            <el-icon><Delete /></el-icon>
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          v-model:current-page="data.currentPage1"
          v-model:page-size="data.pageSize2"
          :page-sizes="[5, 10, 15, 20]"
          layout="sizes, prev, pager, next"
          :total="data.total"
          @size-change="load"
          @current-change="load"
      />
    </div>
  </div>
</template>

<script setup>
import {computed, reactive} from "vue";
import request from "@/utils/request.js";

const data = reactive({
  tableDate:[],
  //当前页数
  currentPage1: 1,
  //每页显示的页数
  pageSize2: 5,
  total:0
})

//计算Table 里面显示的数据
const tableInfo = computed(()=>{
  //计算当前Table 这一页应该从那条数据到那条数据
  let start=(pageInfo.currentPage1-1)*pageInfo.pageSize2
  let end=start+pageInfo.pageSize2
  return tableData.slice(start,end)
})






//执行网络请求
const load=()=>{
  request.get("getAll",{
    params:{
      pageNum:data.currentPage1,
      pageSize:data.pageSize2
    }

  }).then(res=>{
    console.log(res)
    data.tableData=res.data.list
    data.total=res.data.total;
  })
}

load()

const deleteHandler = (info) => {
  alert("删除"+info)
  //将删除的数据id
}
</script>